<template>
  <div class="content">
    <div class="pageSearchView">
      <SearchForm v-model="searchParam" :fields="searchFields" :handleSearch="handleSearch" />


    </div>

    <div class="pageTableView">
      <div class="pageTableMenuView">
        <div class="pageTableTitle">
          列表信息 <el-icon><house-icon /></el-icon>
        </div>
        <div class="pageTableButView">
          <el-button :icon="Plus" @click="handleAdd">新建</el-button>
          <el-button :icon="Plus" @click="showAddColumnDialog = true" type="primary">表头列配置</el-button>

        </div>
      </div>
      <!-- 表格 -->
      <el-table class="pageTableClass" :data="paginatedData" height="calc(100vh - 350px)" :loading="isLoading">
        <el-table-column label="序号" align="center" width="80">
          <template #default="scope">
            {{ (paginationParams.current - 1) * paginationParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="materialBomName" label="物料bom名称" align="center" />
        <el-table-column prop="materialBomVersion" label="物料bom版本" align="center" />
        <el-table-column prop="productId" label="产品名称" align="center">
          <template #default="scope">
            {{ getTypeName(scope.row.productId) }}
          </template>
        </el-table-column>
        <!-- 动态列渲染 -->
        <el-table-column v-for="col in columns" :key="col.tableKey" :prop="col.tableKey" :label="col.tableChineseKey"
          align="center" />

        <el-table-column label="操作" align="center" fixed="right" width="280">
          <template #default="scope">
            <el-button @click="handleBOMAssociation(scope.row)" size="small" plain text :icon="SetUp">BOM关联</el-button>
            <el-button @click="handleEdit(scope.row)" size="small" plain text :icon="Edit">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="danger" size="small" plain text :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagePagination">
        <el-pagination background v-model:current-page="paginationParams.currentPage"
          v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next" :total="pageTotal"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 弹窗表单 -->
    <el-dialog v-model="showCrud" :title="crudTitle" width="500">
      <el-form :model="formData" label-width="130px" ref="ruleFormRef" :rules="rules">
        <el-row>
          <el-form-item label="物料bom名称" required prop="materialBomName">
            <el-input v-model="formData.materialBomName" placeholder="请输入物料bom名称" style="width: 300px" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="物料bom版本" required prop="materialBomVersion">
            <el-input v-model="formData.materialBomVersion" placeholder="请输入物料bom版本" style="width: 300px" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="产品名称" required prop="productId">
            <el-select v-model="formData.productId" clearable style="width: 300px">
              <el-option v-for="item in productData" :key="item.id" :value="item.id" :label="item.productName" />
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 动态字段在弹窗中渲染 -->
        <el-form-item :span="12" v-for="col in columns" :key="col.tableKey" :label="col.tableChineseKey"
          :prop="col.tableKey">
          <el-input v-model="formData[col.tableKey]" :placeholder="`请输入${col.tableChineseKey}`" style="width: 300px" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="showCrud = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 动态添加列的对话框 -->
    <el-dialog v-model="showAddColumnDialog" title="管理列信息">
      <!-- 表格增删改查 -->
      <el-button :icon="Plus" @click="showAddColumnDialog2 = true; columnDialogTitle = '新建'" type="primary"
        style="margin-bottom: 20px;">新建列</el-button>
      <el-table :data="columns">
        <el-table-column prop="tableChineseKey" label="列名称" align="center" />
        <el-table-column prop="tableKey" label="列编码" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button @click="editColumn(scope.row, scope.$index)" size="small" icon="Edit">编辑</el-button>
            <el-button @click="deleteColumn(scope.row, scope.$index)" size="small" type="danger"
              icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <template #footer>
        <el-button @click="showAddColumnDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 动态添加列的对话框 -->
    <el-dialog v-model="showAddColumnDialog2" :title="columnDialogTitle">
      <el-form>
        <el-form-item label="列名称">
          <el-input v-model="newColumn.tableChineseKey" placeholder="请输入列名称" />
        </el-form-item>
        <el-form-item label="列Key">
          <el-input v-model="newColumn.tableKey" placeholder="请输入列Key" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddColumnDialog2 = false">取消</el-button>
        <el-button type="primary" @click="addColumn">确定</el-button>
      </template>
    </el-dialog>
  </div>
  <BOMSidebar :visible="drawerVisible" :data="drawerBOMData" :currentItem="currentItem" />

</template>

<script lang="ts" setup>
import SearchForm from '@/components/SearchForm.vue';
import { useProductBOMData, useToolData } from '@/hooks/baseData/productBOM';
import axiosInstance from '@/utils/http/api';
import { Delete, Edit, Plus, SetUp } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref, watch } from 'vue';
import BOMSidebar from './BOMSidebar.vue';

const {
  searchParam,
  paginationParams,
  pageTotal,
  paginatedData,
  searchFields,
  handleSearch,
  handleSizeChange,
  handleCurrentChange,
  addTool,
  deleteTool,
  isLoading,
  ruleFormRef,
  rules,
  formData,
  productData
} = useToolData();
onMounted(() => {
  getColumnsList()
})
// 动态列和新列的数据
const columns = ref([
  { tableChineseKey: '自定义列1', tableKey: 'tableKey', visible: true },
  { tableChineseKey: '自定义列2', tableKey: 'tableKey', visible: true },
  // 可添加更多默认列
]);
const showAddColumnDialog = ref(false);
const showAddColumnDialog2 = ref(false);
const columnDialogTitle = ref("")
const columnIndexNumber = ref(0)

const newColumn = ref({
  tableChineseKey: '',
  tableKey: '',
  visible: true,
  id: ""
});
// 查询列
const getColumnsList = () => {
  axiosInstance.post("/api/dynamicTableExtension/getPage",
    { page: 1, pageSize: 999, tableName: "productBOM" }
  ).then(res => {
    const { data, code, message } = res
    if (code === 200) {
      console.log(data);
      columns.value = data.records
    }
  })
}
// 新建列
const addColumn = () => {
  console.log("编辑");

  if (newColumn.value.tableKey && newColumn.value.tableChineseKey) {

    if (columnDialogTitle.value === "新建") {
      axiosInstance.post('/api/dynamicTableExtension/save', {
        "frontendType": "INPUT",
        "tableName": "productBOM",
        "tableKey": newColumn.value.tableKey,
        "tableChineseKey": newColumn.value.tableChineseKey
      }).then(res => {
        if (res.code === 200) {
          ElMessage.success("新建列成功");
          getColumnsList()
          // columns.value.push({ ...newColumn.value });
          newColumn.value = { tableKey: '', tableChineseKey: '', visible: true };
          showAddColumnDialog2.value = false
        }
      })

    }
    else {
      console.log("编辑");
      axiosInstance.put('/api/dynamicTableExtension/update', {
        "frontendType": "INPUT",
        "tableName": "productBOM",
        "tableKey": newColumn.value.tableKey,
        "tableChineseKey": newColumn.value.tableChineseKey,
        "id": newColumn.value.id

      }).then(res => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          getColumnsList()
          showAddColumnDialog2.value = false

        }
      })

    }

  }
};

// 编辑列
const editColumn = (row: any, index: number) => {
  console.log(row);
  columnIndexNumber.value = index
  columnDialogTitle.value = "编辑"
  showAddColumnDialog2.value = true
  newColumn.value.tableChineseKey = row.tableChineseKey
  newColumn.value.tableKey = row.tableKey
  newColumn.value.id = row.id

};

// 删除列
const deleteColumn = (row: any, index: number) => {
  axiosInstance.delete("/api/dynamicTableExtension/delete", {
    data: {
      ids: [row.id]
    }
  }).then(res => {
    if (res.code === 200) {
      getColumnsList()
      ElMessage.success("修改成功");

    }
  })
  // columns.value.splice(index, 1);
};
const {
  handleBOMAssociation,
  drawerVisible,
  drawerBOMData,
  currentItem
} = useProductBOMData()
const getTypeName = (type: string) => {
  const name = productData.value.find((item: any) => item.id === type);
  return name ? name.productName : '';
};

const isEdit = ref(false);
const showCrud = ref(false);
const crudTitle = computed(() => {
  return isEdit.value ? '编辑' : '新建';
});


watch(drawerBOMData, (newVal) => {
  console.log('触发了', drawerBOMData.value);
  if (newVal) {
    console.log('触发了', drawerBOMData.value);

  }
});
// 新建记录
const handleAdd = () => {
  isEdit.value = false;
  formData.value = {};
  showCrud.value = true;
};

// 编辑记录
const handleEdit = (row: any) => {
  isEdit.value = true;
  formData.value = { ...row };
  showCrud.value = true;
};

// 删除记录
const handleDel = (row: any) => {
  ElMessageBox.confirm('确定删除该条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteTool(row.id);
  }).catch(() => {
  });
};

// 保存记录
const handleSave = async () => {
  const formDataObject = columns.value.reduce((acc, col) => {
    acc[col.tableKey] = formData.value[col.tableKey];
    return acc;
  }, {});
  console.log(formDataObject);
  formData.value.extension = formDataObject
  await addTool(formData.value, (() => {
    showCrud.value = false;
  }));
};


</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
